<script setup>
import Toast from '@vant/weapp/dist/toast/toast';
import { GgetAiHistory, delHistory } from '@/api/home'
import { onMounted, ref, computed, watch } from 'vue'


const props = defineProps({
    isDownload: Boolean
})


const queryParams = ref({
    page: 0,
})

const chatList = ref([])
const flag = ref(true)



const isAllText = computed(() => {
    if (chatList.value.every(group => group.length === 0)) {
        return '全选';
    }
    const allSelected = chatList.value.every(item => item.checked);
    return allSelected ? '取消' : '全选';
});



watch(() => props.isDownload, (newVal) => {
    if (newVal) {
        chatList.value.forEach(item => {
            item.checked = false; // 重置选中状态
        });
    }
}, { immediate: true, deep: true })



// 全选
function isAllFn() {
    if (chatList.value.every(group => group.length === 0)) return Toast.fail('暂无数据')
    const allSelected = chatList.value.every(item => item.checked);
    chatList.value.forEach(item => {
        item.checked = !allSelected;
    });
}

// 删除图片
async function clearImgFn() {
    // 获取选中的图片
    const selectedItems = chatList.value.filter(item => item.checked);
    if (!selectedItems.length) return Toast.fail('请先选择要删除的对话历史')
    uni.showModal({
        title: '提示',
        content: '是否删除选中的对话历史？',
        success: async (res) => {
            if (res.confirm) {
                const ids = selectedItems.map(item => item.id)
                await delHistory(ids)
                Toast.success('删除成功')
                flag.value = true
                queryParams.value.page = 0
                GgetAiHistoryFn()
            }
        }
    })
}


// 点击列表项
function clickCellFn(e) {
    if (!props.isDownload) {
        return uni.navigateTo({ url: `/pages/chatHistoryDetails/index?item=${JSON.stringify(e)}`, })
    }
    e.checked = !e.checked
}


// 获取历史记录
const GgetAiHistoryFn = async () => {
    if (!flag.value) return
    const res = await GgetAiHistory(queryParams.value.page)
    if (queryParams.value.page === 0) {
        chatList.value = []
    }
    if (res.data.length >= 10) {
        queryParams.value.page++
    } else {
        flag.value = false
    }
    chatList.value.push(...res.data)
}

function onScrolltolower() {
    GgetAiHistoryFn()
}

onMounted(() => {
    // 获取历史记录
    GgetAiHistoryFn()
})
</script>

<template>
    <div class='chatHistory'>
        <scroll-view scroll-y :scroll-top="scrollTop" class="scrollView" @scrolltolower="onScrolltolower">
            <div class="scroll_list">
                <div class="scroll_item" v-for="item of chatList" v-if="chatList.length" :key="item.id"
                    @click="clickCellFn(item)">
                    <div class="top">
                        <div class="title">{{ item?.promptTitle }}</div>
                        <div class="timer">{{ item?.createTime }}</div>
                    </div>
                    <div class="content">{{ item.promptContent }}</div>

                    <!-- 选中 -->
                    <checkbox v-if="isDownload" class="checkboxClass" :value="item.id" :checked="item.checked">
                    </checkbox>
                </div>
                <img v-else class="noData" src="@/draw/assets/暂无数据.png" mode="aspectFill">

            </div>
        </scroll-view>
        <div class="footer" v-if="isDownload">
            <div class="footer_placeholder"></div>
            <div class="footer_content">
                <div class="left" @click="isAllFn">{{ isAllText }}</div>
                <div class="right" @click="clearImgFn">删除</div>
            </div>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.chatHistory {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .scrollView {
        box-sizing: border-box;
        flex: 1;
        height: 1rpx;
        margin-top: 20rpx;
        padding: 0 30rpx 40rpx;
        position: relative;

        .noData {
            display: block;
            width: 500rpx;
            height: 500rpx;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .scroll_list {

            .scroll_item {
                box-sizing: border-box;
                position: relative;
                height: 146rpx;
                background: var(--a-main-box-bg-color);
                border-radius: 20rpx;
                padding: 20rpx 24rpx 20rpx 60rpx;
                margin-top: 20rpx;

                &:first-child {
                    margin-top: 0;
                }

                .top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 30rpx;

                    .title {
                        flex: 1;
                        font-weight: bold;
                        font-size: 30rpx;
                        color: var(--a-one-text-color);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .timer {
                        flex-shrink: 0;
                        font-size: 22rpx;
                        color: var(--a-three-text-color);
                    }
                }

                .content {
                    font-size: 26rpx;
                    color: var(--a-two-text-color);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                }

                .checkboxClass {
                    position: absolute;
                    top: 50%;
                    left: 10rpx;
                    transform: translate(0, -50%);
                }
            }
        }

    }

    .footer {
        .footer_placeholder {
            height: 170rpx;
        }

        .footer_content {
            box-sizing: border-box;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 170rpx;
            background: var(--a-main-tabNav-bg-color);
            padding: 28rpx 30rpx 0;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 16rpx;

            .left,
            .right {
                flex: 1;
                flex-shrink: 0;
                height: 84rpx;
                border-radius: 42rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                &.left {
                    color: var(--a-one-text-color);
                    border: 2rpx solid #45426f;

                }

                &.right {
                    color: var(--a-mod-bg-color);
                    background: linear-gradient(90deg, #C3E9FF 0%, #A3B4FA 100%);
                }
            }

        }
    }

}
</style>